<style lang="scss" scoped>

</style>
<template>
    <div class="class">
        <div class="head border-radius bg-fff p-1 d-flex between">
            <div class="ipt"></div>
            <Button type="primary" icon="ios-add-circle-outline" @click="handle_edit(0,true)">添加</Button>
        </div>
        <div class="content mt-1">
            <Table :columns="columns" class="diy_table" :data="list">
                <template slot-scope="{ row }" slot="handle">
                    <Button class="mr-1" @click="$router.push({name:'student',query:{cid:row.id}})">学生管理</Button>
                    <Button class="mr-1" @click="getCharts(row)">得分趋势图</Button>
                    <Button ghost type="primary" class="mr-1" @click="handle_edit(row)" >编辑</Button>
                    <Button ghost type="error" @click="handle_del(row)">删除</Button>
                </template>
            </Table>
            <div class="clearfix mt-2">
                <Page :current.sync="filters.page" :page-size="filters.list_rows" :total="total_page" show-sizer class="float-right" show-total @on-change="getList_page"/>
            </div>
        </div>
        <Modal title="得分趋势图" v-model="modalShow" width="800">
            <Tabs>
                <TabPane label="平均成绩" name="name1">
                    <pie-charts v-if="modalShow" :data="scoreData" />
                </TabPane>
                <TabPane label="平均正确率" name="name2">
                    <pie-charts v-if="modalShow" :data="accuracyData" />
                </TabPane>
            </Tabs>
        </Modal>
    </div>
</template>

<script>
import pageMixin from "@/common/pageMixin"
import {class_list,class_add,class_edit,class_students,class_delete} from "@/common/tapi"
import pieCharts from "@/components/pieCharts"
import {mutations} from '@/store'
export default {
    mixins:[pageMixin],
    data(){
        return {
            modalShow:false,
            accuracyData:[],
            scoreData:[],
            columns:[
                {
                    title: '名称',
                    key: 'name'
                },
                {
                    title: '人数',
                    key: 'student_num'
                },
                {
                    title: '总分',
                    key: 'total_score'
                },
                {
                    title: '平均分',
                    key: 'average_score'
                },
                {
                    title: '操作',
                    width:400,
                    slot: 'handle',
                    align: 'center'
                }
            ],
            list:[]
        }
    },
    methods:{
        set_var:mutations.set_var,
        getCharts(row){
            class_students({cid:row.id})
            .then(res=>{
                if(res){
                    const arr=res.data.info
                    const scoreData={
                        title:'成绩区块图',
                        data:{
                            '60分以下':0,
                            '60~70':0,
                            '70~80':0,
                            '80~90':0,
                            '90~100':0,
                        }
                    }
                    const accuracyData={
                        title:'正确率区块图',
                        data:{
                            '60%以下':0,
                            '60%~70%':0,
                            '70%~80%':0,
                            '80%~90%':0,
                            '90%~100%':0,
                        }
                    }
                    arr.forEach(el => {
                        if(el.average_score<60)
                            scoreData.data['60分以下']++
                        else if(el.average_score<70 && el.average_score>=60)
                            scoreData.data['60~70']++
                        else if(el.average_score<80 && el.average_score>=70)
                            scoreData.data['70~80']++
                        else if(el.average_score<90 && el.average_score>=80)
                            scoreData.data['80~90']++
                        else if(el.average_score>=90)
                            scoreData.data['90~100']++
                        
                        if(el.average_accuracy_class<60)
                            accuracyData.data['60%以下']++
                        else if(el.average_accuracy_class<70 && el.average_accuracy_class>=60)
                            accuracyData.data['60%~70%']++
                        else if(el.average_accuracy_class<80 && el.average_accuracy_class>=70)
                            accuracyData.data['70%~80%']++
                        else if(el.average_accuracy_class<90 && el.average_accuracy_class>=80)
                            accuracyData.data['80%~90%']++
                        else if(el.average_accuracy_class>=90)
                            accuracyData.data['90%~100%']++
                    });
                    this.scoreData=scoreData
                    this.accuracyData=accuracyData
                    this.modalShow=true
                }
            })
        },
        getList(){
            class_list(this.filters)
            .then(res=>{
                if(res){
                    this.list=res.data.list
                    this.total_page=res.data.pageinfo.total
                }
            })
        },
        handle_del(row){
            this.$Modal.confirm({
                title: '提示',
                content: `删除班级后，该班所有学生都将清空，确认删除${row.name}班吗？`,
                onOk: () => {
                    class_delete({
                        cid:row.id
                    })
                    .then(res=>{
                        if(res){
                            this.$Notice.success({
                                title: '成功',
                                desc:'删除成功'
                            });
                            this.getList()
                            return class_list({list_rows:999999,page:1})
                        }
                    })
                    .then(res=>{
                        if(res){
                            this.set_var('classList',res.data.list)
                        }
                    })
                }
            });
        },
        handle_edit(row,is_new=false){
            let name=''
            this.$Modal.confirm({
                render: (h) => {
                    const input=h('Input', {
                        props: {
                            autofocus: true,
                            placeholder: '请输入新名称'
                        },
                        on: {
                            input: (val) => {
                                name=val
                            }
                        }
                    })
                    return h('div',[
                        h('h3',{ class:'mb-2' },is_new?'新建班级':`更改${row.name}班名称`),
                        input
                    ])
                },
                onOk: () => {
                    const fm=is_new?{name}:{id:row.id,name}
                    const func=is_new?class_add:class_edit
                    func(fm)
                    .then(res=>{
                        if(res){
                            this.$Notice.success({
                                title: '提交成功',
                                desc:is_new?'班级添加成功':'班级修改成功'
                            });
                            this.getList()
                        }
                    })
                },
            })
        }
    },
    components:{pieCharts},
    created(){
        this.getList_page()
    }
}
</script>
